<template>
	<!-- 键盘监听输入代码 -->
	<view class="page" @click="focusClicked">
		<!-- 键盘监听输入框 -->
		<view class="input-content-back" v-if="platform == 'ios'">
			<input v-model="inputValue" type="password" class="input-class" :focus='focusState' :auto-blur="false"
				:show-confirm-bar="false" @input="inputChange" @confirm="enterClicked" @keydown.enter="enterClicked"
				inputmode="none"> </input>
			<input v-model="inputValue1" type="password" class="input-class" :focus='focusState2' :auto-blur="false"
				:show-confirm-bar="false" @input="inputChange" @confirm="enterClicked" @keydown.enter="enterClicked"
				inputmode="none"> </input>
		</view>
		<navbar :title="game_mode_1" :close-confirm="true" @leaveRoom="fnLeaveRoom" />
		<view class="top-hr" style="height: 0px;"></view>

		<!-- 遮罩层 -->
		<uv-overlay :show="finishShow==true">
			<view v-if="allFinished==true" class="" style="height: 100%;width:100%;">
				<view @click="fnFinishGame()" class="" v-if="game_mode=='极速拼词|联机模式' && yanhuaShow==true" id="yanhuaBox"
					style="position: absolute;width: 100%;height:100%;z-index: 102;">
					<yanhua></yanhua>
				</view>
				<view class="warp"
					style="display: flex;flex-direction: column;position: absolute;z-index: 101;width: 100%;">
					<view class="rect" @tap.stop>
						{{yanhuaShow==true?'优胜':'完成'}}
					</view>
					<view class="" @click.stop="fnFinishGame()" style="background: linear-gradient(to top, #fff497, #ffd16b);
						padding: 8px 40px;
						border-radius: 23px;
						margin-top: 20px;
						font-family: hzgb;">
						确定
					</view>
				</view>
			</view>
			<view v-else class="" style="height: 100%;width:100%;">
				<view class="warp"
					style="display: flex;flex-direction: column;position: absolute;z-index: 101;width: 100%;">
					<view v-show="game_mode=='极速拼词|联机模式'" @tap.stop class="loading-class">
						{{messageTip}}
					</view>
					<view v-show="game_mode=='极速拼词|训练模式'" @tap.stop class="loading-class">
						{{messageTip}}
					</view>
					<!-- <view class="" style="
						padding: 8px 40px;
						border-radius: 23px;
						margin-top: 20px;
						font-family: hzgb;">
						<uv-loading-icon color="#ffffff" size="50"></uv-loading-icon>
					</view> -->
				</view>
			</view>
		</uv-overlay>

		<!-- alert弹框 -->
		<popPromptBox v-if="showAlertDialog" :msg="alertMessage" @confirm="fnCancelAlert()"></popPromptBox>

		<!-- 确认弹框 -->
		<selectContentView v-if="showConfirmDialog" :msg="confirmMessage" confirmTitle="是" cancelTitle="否"
			@confirm="fnConfirmLeave()" @cancel="fnCancelLeave()"></selectContentView>

		<!-- 倒计时 -->
		<!-- <view style="display: none;">
			<uv-count-down ref="countDown" :time="120* 1000" format="ss" :autoStart="false" @change="onChange"
				@finish="onFinish">
			</uv-count-down>
			<button type="primary" size="small" @click="reset">重置</button>
			<button type="primary" size="small" @click="start">开始</button>
			<button type="primary" size="small" @click="pause">暂停</button>
		</view> -->

		<!-- 播放音频时的加载中动画 -->
		<!-- <uv-loading-page :loading="loadingStatus" :bg-color="loadingBgColor" :loading-color="loadingColor"
			:color="color" :loading-text="loadingText" font-size="24rpx"></uv-loading-page> -->
		<uv-overlay :show="loadingStatus==true && allFinished==false">
			<view class="warp" style="color: red;">
				<view v-if="gameStatus==1" class="loading-class">
					赛前准备中，请稍作等待
					<view style="border:1px solid green;" @click="fnLeaveRoomV2()" class="">
						退出房间
					</view>
				</view>
				<view v-if="gameStatus>1&&gameStatus<5" class="loading-class">
					题目准备中，请稍作等待
				</view>
				<view v-if="gameStatus>=5 && downtime > 1" class="loading-class">
					发音官正在发音，请稍作等待
				</view>
			</view>
		</uv-overlay>

		<!-- 每轮结束时，信息展示 -->
		<!-- <uv-overlay :show="true">
			<view class="warp" style="color: red;display: flex;flex-direction: column;width: 80%;margin: 0 auto;">
				<view style="background-color: red;text-align: left;width: 100%;">
					<uv-cell-group title="晋级人数">
						<uv-cell icon="integral-fill" title="版本更新" value="已是新版本"></uv-cell>
					</uv-cell-group>
				</view>
				<view style="background-color: red;text-align: left;width: 100%;margin-top: 10px;">
					<uv-cell-group title="淘汰人数">
						<uv-cell icon="integral-fill" title="版本更新" value="已是新版本"></uv-cell>
					</uv-cell-group>
				</view>
			</view>
		</uv-overlay> -->

		<view class="main" :style="{ height: scrollHeight + 'px'}">
			<uv-notify ref="uNotify" message="Hi uView" type="success"></uv-notify>

			<!-- <view class="" style="color: white;">
				{{test_wordlist.length}}==={{group_info.test_wordlist.length}}
			</view> -->
			<view class="level_item level_1">
				<view style="display: flex;flex-direction: row;align-items: center;width: 100%;">
					<view class="" style="width: 100px;display: flex;flex-direction: column;">
						<titleBar :title="group_info.zubieName" :titlefs="16" :remark="group_info.zubieEnName"
							:remarkfs="8"></titleBar>
						<!-- remark 8px -->
					</view>
					<view class="" style="flex: 1;position: relative;">
						<!-- 倒计时进度条 -->
						<uv-line-progress :percentage="downtime_percentage" :showText="false"
							activeColor="#f73c69"></uv-line-progress>
						<view
							style="position: absolute;width: 100%;bottom: -30px;color: white;white-space: nowrap;font-size: 16px;font-family: hzgb;">
							<!-- 联机模式 -->
							{{game_mode_2}}｜{{ game_mode_2 === '联机模式' ? 'Online Mode' : 'Training Mode' }}
							<!-- {{gameStatus}} -->
							<!-- {{group_info.id}} : {{user_info.id}} -->
						</view>
					</view>
					<view class="" style="width: 100px;display: flex;flex-direction: column;">
						<titleBar :title="downtime+'s'" :titlefs="20" remark="Times" :remarkfs="8"></titleBar>
					</view>
				</view>
			</view>

			<view class="level_item level_2"
				:style="{backgroundImage: 'url(' + (gameStatus>3 ? '/static/image/app/test_starting_new.png' : '/static/image/app/test_end_new.png') + ')'}"
				style="position: relative;align-items: flex-end;display: flex;width: 100%;">
				<view
					style="position:absolute;width: 100%;width: 100%;height: 100%;display: flex;flex-direction: column;">
					<view style="min-height: 87px;height: 87px;">
						<uv-scroll-list :indicator="indicator">
							<view class="scroll-list" style="flex-direction: row;">
								<!--  v-show="item.user_id!=user_info.id" -->
								<view class="scroll-list__goods-item" v-for="(item, index) in user_list" :key="index"
									:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']">

									<block v-if="gameStatus<=3">
										<block v-if="item.username!='空位置'">
											<!-- <view class="scroll-list__goods-item__text" style="color: white;">
												No.{{item.user_id}}
											</view> -->
											<view class="scroll-list__goods-item__text"
												style="font-size: 14px;font-family: hzgb;color: white;height: 16px;">
												<view v-if="item.user_id == user_info.id">我</view>
												<view v-else>{{item.username}}</view>
											</view>
											<view class="scroll-list__goods-item__text ok-btn"
												:class="{fangzu:item.user_id==group_info.user_id}">
												<image v-if="item.user_id==group_info.user_id" class="huangguan"
													src="../../../static/image/huangguan.png" alt="" />
												<block v-if="item.user_id==group_info.user_id">
													<text>
														房主
													</text>
												</block>
												<block v-else>
													<text v-if="item.status>=1">
														已准备
													</text>
													<text v-else>
														未准备
													</text>
												</block>
											</view>
										</block>
										<block v-else>
											<view class="scroll-list__goods-item__text ok-btn" style="background: none;"
												:class="{fangzu:item.user_id==group_info.user_id}">
												<text>
													<uv-loading-icon color="#ffffff" textColor="#ffffff"
														:vertical="true" :size="16" text="空"
														textSize="30rpx"></uv-loading-icon>
												</text>
											</view>
										</block>
									</block>
									<block v-else>
										<!-- <view class="scroll-list__goods-item__text" style="color: white;">
											No.{{item.user_id}}
										</view> -->
										<view class="scroll-list__goods-item__text"
											style="font-size: 14px;font-family: hzgb;color: white;height: 16px;">
											<view v-if="item.user_id == user_info.id">我</view>
											<view v-else>{{item.username}}</view>
										</view>
										<view class="scroll-list__goods-item__text ok-btn">
											<block v-if="item.online==1">
												<text>
													比赛中
												</text>
											</block>
											<block v-else>
												<text>
													暂离
												</text>
											</block>
										</view>
									</block>
								</view>
							</view>
						</uv-scroll-list>
					</view>

					<!-- 比赛开始前 -->
					<view v-if="gameStatus<=3"
						style="text-align: center;display: flex;flex-direction: column;align-items: center;flex:1;overflow: hidden;">
						<view class="btn-style" style="height: 30px;line-height: 30px;width: 130px;">
							房间号：{{group_info.id}}
						</view>
						<view class="btn-style" style="height: 40px;font-size: 26px;line-height: 40px;width: 252px;">
							{{yes_count}} / {{yes_count + no_count + none_count}}
						</view>
						<view class="btn-style" style="font-size: 20px;width: 179px;padding: 4px 0;">
							极速拼词
							<view class="title-en-common">Speed Spell</view>
						</view>
					</view>

					<!-- 比赛开始后 -->
					<view v-if="gameStatus>3" class="fengzai" style="flex:1;">
						<view v-show="labelStr!='null'" class="word-tag-class">
							<!-- 请在考官说出第一个单词读音后开始答题 -->
							<!-- 等待发音完毕后开始答题 -->
							<span>拼词标签：{{labelStr!='null'?labelStr:'暂无'}}</span>
						</view>
						<view class="btn-style2" style="background: linear-gradient(to top, #373632, #130e00);
							border-radius: 24px;
							width: 90px;
							color: white;
							font-family: hzgb;
							font-size: 18px;
							height: 24px;
							line-height: 24px;">
							{{test_wordlist[currentWordIndex].no}}/{{group_info.test_wordlist.length}}
						</view>
						<view title="input框" class="btn-style2"
							:class="{'answer_success':answer_status=='success','answer_error':answer_status=='error'}"
							style="background: #fff9e1;
							overflow-x: auto;
							overflow-y: hidden;
							width: 268px;
							height: 50px;
							line-height: 50px;
							color:#000000;
							font-family: hzgb;
							font-size: 20px;
							border: 3px solid black;">
							{{currentAnswer}}
						</view>
						<view class="btn-style2" style="background: linear-gradient(to top, #373632, #130e00);
							border-radius: 28px;
							width: 216px;
							color: white;
							height: 30px;
							line-height: 30px;white-space: nowrap;">
							<block v-if="dev">
								{{finishShow?'':test_wordlist[currentWordIndex].word}}
							</block>
							我答对的单词：{{yes_num}}
						</view>


						<!-- 第一行：  definition   word -->
						<view style="width: 100%;display: flex;flex-direction: row; align-items: center;">
							<view style="flex: 1;color:white;white-space: nowrap;color: transparent;">
								两边间隙
							</view>
							<block v-if="game_info.name=='极速拼词'">
								<view class="ope-rt"
									style="width: 80px;color: black;font-weight: bold;margin-top: 20px;"
									@click="fnPass()">
									<view
										style="height: 64px;  display: flex; align-items: center;justify-content: center;">
										<view class="pass-btnback" :style="passBackStyle">
											<view class="pass-btn" :style="passChildBackStyle">
												PASS
											</view>
										</view>
										<!-- <img v-show="zhudongClick==false" style="height: 100%;"
											src="/static/image/app/voice.png" alt="">
										<img v-show="zhudongClick==true" style="height: 100%;"
											src="/static/image/app/voiceing.png" alt=""> -->
									</view>
								</view>
							</block>
							<block v-else>
								<view class="ope-rt"
									style="width: 80px;color: black;font-weight: bold;margin-top: 20px;"
									@click="fnPlayWordVoiceV2()">
									<view style="height: 42px;">
										<image mode="aspectFit" v-show="zhudongClick==false"
											style="width: 100%;height: 100%;" src="/static/image/app/voice.png"></image>
										<image mode="aspectFit" v-show="zhudongClick==true"
											style="width: 100%;height: 100%;" src="/static/image/app/voiceing.png">
										</image>
									</view>
									<view style="font-family: hzgb;">
										Definition
									</view>
								</view>
							</block>
							<view style="flex: 2;color:white;white-space: nowrap;color: transparent;">
								<view v-if="dev_btn_show" @click="dev=!dev" class="ope-rt"
									style="width: 100%;color: black;font-weight: bold;margin-top: 20px; ">
									<view class="" style="color: transparent;">
										开发模式
									</view>
								</view>
								<view v-else="dev_btn_show">
									开发模式
								</view>
							</view>
							<!-- <view style="flex: 1; background:red;color:white;white-space: nowrap;">
								<text v-show="startRecording==false" @click="startRecording=true">【开始】</text>
								<text v-show="startRecording==true" @click="startRecording=false">【结束】</text>
							</view> -->
							<view class="ope-rt" style="width: 80px;color: black;margin-top: 20px;"
								@click="fnPlayWordVoiceV2()">
								<view style="height: 42px;">
									<image mode="aspectFit" v-show="zhudongClick==false"
										style="width: 100%;height: 100%;" src="/static/image/app/voice.png"></image>
									<image mode="aspectFit" v-show="zhudongClick==true"
										style="width: 100%;height: 100%;" src="/static/image/app/voiceing.png"></image>
								</view>
								<view style="font-family: hzgb; font-size: 12px;">
									Word
								</view>
							</view>

							<view style="flex: 1;color:white;white-space: nowrap;color: transparent;">
								两边间隙
							</view>
						</view>

						<!-- 第一行：  sentence    -->
						<view style="width: 100%;display: flex;flex-direction: row;">
							<view style="flex: 1;color:white;white-space: nowrap;color: transparent;">
								两边间隙
							</view>
							<view class="ope-rt" style="width: 80px;color: black;font-weight: bold;margin-top: 20px;">

							</view>
							<view style="flex: 2;color:white;white-space: nowrap;color: transparent;">
								<view v-if="dev_btn_show" @click="dev=!dev" class="ope-rt"
									style="width: 100%;color: black;font-weight: bold;margin-top: 20px; ">
									<view class="" style="color: transparent;">
										开发模式
									</view>
								</view>
								<view v-else="dev_btn_show">
									开发模式
								</view>
							</view>
							<view class="ope-rt"
								style="width: 80px;color: black;margin-top: 20px; display: flex;flex-direction: column; align-items: center; justify-content: center;"
								@click="speechClicked">
								<view class="speech-back">
									<view class="speech-class" :class="{'recording':startRecording}"
										:style="{backgroundImage:startRecording==true?'none!important':'url(../../../static/image/speechBg.png)'}">
										<view class="speech-sen-class">
											<image v-show="startRecording==false" mode="aspectFit"
												style="width: 75%;height: 75%;"
												src="/static/image/app/speech-unlight.png">
											</image>

											<!-- 进度球 -->
											<l-liquid title="进度球" v-show="startRecording==true"
												style="position: absolute;z-index: -1;width: 42px;height: 42px"
												:style="{zIndex:percent==0?-1:1}" :current.sync="modelVale"
												:percent="percent" :wave-color="color">
												<text title="进度球" style="color: black;font-weight: bold;">
													{{percentTimes}}
												</text>
											</l-liquid>
										</view>
									</view>
								</view>
								<view style="font-family: hzgb;font-size: 12px;">
									Speech
								</view>
							</view>
							<view style="flex: 1;color:white;white-space: nowrap;color: transparent;">
								两边间隙
							</view>
						</view>
					</view>

					<!-- <view class="" style="background-color: none;height: 200px;">

					</view> -->
				</view>

				<view v-if="deviceType=='phone'" class="mifeng" style="height: 200px;width: 100%;">
					<mifeng v-if="canvasheight>0" ref="uniWordList1">
					</mifeng>
				</view>
				<view v-if="deviceType=='pad'" class="mifeng" style="height: 600px;width: 100%;">
					<mifeng2 v-if="canvasheight>0" ref="uniWordList1">
					</mifeng2>
				</view>
			</view>
			<!-- 游戏开始前 -->
			<view v-show="gameStatus<=3" class="level_item level_3" style="position: relative;overflow: visible;">
				<view
					style="display: flex;flex-direction: column;align-items: center;width: 100%;height: 100%;padding-top: 10px;">
					<!-- 房主 -->
					<block v-if="user_info.id==group_info.user_id">
						<!-- 开始按钮 -->
						<view @click="fnStart()" class=""
							style="height: 125px;display: flex;flex-direction: column;position:relative;">
							<image v-if="yes_count==group_info.people_num" style="width: 110px;height: 125px;"
								src="/static/image/app/6yellow.png" alt="" />
							<image v-else style="width: 110px;height: 125px;" src="/static/image/app/6gray.png"
								alt="" />
							<view style="position: absolute;
										width: 100%;
										justify-content: center;
										height: 100%;
										display: flex;
										font-size: 23px;
										align-items: center;
										font-family: hzgb;" :class="{startable:yes_count==group_info.people_num}">
								<view>
									{{startBtnText}}
									<view v-if="startBtnText === '开始'" class="title-en-common">Start</view>
								</view>
							</view>
						</view>
					</block>

					<!-- 非房主 -->
					<block v-if="user_info.id!=group_info.user_id">
						<!-- 准备按钮 -->
						<view v-show="current_user_info.status==0" @click="fnMyReady('准备就绪')" class=""
							style="height: 125px;display: flex;flex-direction: column;position:relative;">
							<image mode="heightFix" style="width: 110px;height: 125px;"
								src="../../../static/image/start.png"></image>
							<view style="position: absolute;
										color: #fff;
										width: 100%;
										justify-content: center;
										height: 100%;
										display: flex;
										font-size: 23px;
										align-items: center;
										font-family: hzgb;">
								<view>
									准备
									<view class="title-en-common">Prepare</view>
								</view>
							</view>
						</view>

						<!-- 已准备按钮 -->
						<view v-show="current_user_info.status==1" @click="fnMyReady('取消准备')" class=""
							style="height: 125px;display: flex;flex-direction: column;position:relative;">
							<image mode="heightFix" style="height: 100%;" src="../../../static/image/ready.png"></image>
							<view style="position: absolute;
										color: #fff;
										width: 100%;
										justify-content: center;
										height: 100%;
										display: flex;
										font-size: 23px;
										font-family: hzgb;
										align-items: center;">
								<view>
									取消
									<view class="title-en-common">Cancel</view>
								</view>
							</view>
						</view>

						<view v-show="current_user_info.status==3" class=""
							style="height: 125px;display: flex;flex-direction: column;position:relative;">
							<image mode="heightFix" style="height: 100%;" src="/static/image/app/6yellow.png"></image>
							<view style="position: absolute;
										color: white;
										width: 100%;
										justify-content: center;
										height: 100%;
										display: flex;
										font-size: 23px;
										align-items: center;
										font-weight: bold;">
								<!-- {{readyBtnText}} -->
								<view>
									{{readyBtnText}}
									<view v-if="readyBtnText === '已准备'" class="title-en-common">Ready</view>
								</view>
							</view>
						</view>
					</block>




					<view v-show="game_mode=='极速拼词|联机模式'" class=""
						style="flex: 1;position: relative;display: flex;align-items: center;color: white;font-family: hzgb;font-size: 13px;">
						<!-- 非房主 -->
						<block v-if="user_info.id!=group_info.user_id">
							<block v-if="gameStatus==1">
								请耐心等待房主开始游戏
							</block>
							<block v-if="gameStatus==0">
								请准备
							</block>
						</block>
						<!-- 房主 -->
						<block v-else>
							<view>
								等待其他选手准备后才能点击开始
								<view class="btn-en">Wait for other spellers to prepare before you can click Start
								</view>
							</view>
						</block>
					</view>
					<view v-show="game_mode=='极速拼词|联机模式'" class=""
						style="height: 76px;display: flex;flex-direction: row;align-items: center;">
						<view style="flex: 1;"></view>

						<view style="width: 135px;" class="invite_copy" @click="fnCopyInviteUrl()">
							复制邀请链接
						</view>
						<view style="width: 50px;">
							<text class="donghuaType" style="color:#ffffff00;">{{donghua}}</text>
						</view>
						<view style="width: 135px;" class="invite_weixin" @click="fnWeixinInvite()">
							微信邀请
						</view>
						<view style="flex: 1;"></view>
					</view>
				</view>
			</view>

			<!-- 游戏开始后 -->
			<view v-show="gameStatus>3" class="level_item level_3"
				style="position: relative;overflow: visible;display: flex;align-items: center;">
				<!-- 提交按钮 -->
				<view class="submitBtn" style="position: absolute;top:-75px;width: 85px;z-index: 10px;z-index: 100;"
					:style="{marginLeft:submitPositionLeft+'px'}">
					<view class="hexagon" @click="fnSubmit()">
						<view class="pass">
							提交
						</view>
					</view>
				</view>

				<keyboard ref="keyboard" @input="fnClickKeyboard" :currentKey="currentKey" @playStates="voicePlay">
				</keyboard>

				<view v-show="answer_status=='success'||answer_status=='error'" class=""
					style="width: 100%;height: 100%;border: 0px solid red;position: absolute;z-index: 100;"></view>
			</view>
		</view>
		<keyboardListener v-if="platform == 'android'" @keydown="listenOnKeydown"></keyboardListener>
		<!-- <keyboardListener v-if="platform == 'android'" @keyup="listenOnKeyup"></keyboardListener> -->
		<popRules v-if="showTips" :msg="rules" title="极速拼词游戏规则" @close="showTips = false" @confirm="showTips = false">
		</popRules>
		<selectContentView v-if="confirmTipShow" :msg="confirmTipMsg" :confirmTitle="confirmTipConfirmText"
			:cancelTitle="confirmTipCancelText" @confirm="confirmTipShow = false" @cancel="confirmTipShow = false">
		</selectContentView>
	</view>
</template>
<script>
	import keyboard from '../../../components/games/keyboard.vue'
	import titleBar from '../../../components/games/title-bar.vue'
	import navbar from '../../../components/gamesNav.vue'
	import mifeng from '../../../components/games/mifeng.vue'
	import mifeng2 from '../../../components/games/mifeng2.vue'
	import yanhua from '../../../components/games/yanhua.vue'
	import popRules from '../../../components/popRules.vue'
	import keyboardListener from 'uniapp-keyboard-listener'
	// import keyboardListener from '../keyboard-listener.vue'

	/** 先引入Recorder （ 需先 npm install recorder-core ）**/
	import Recorder from 'recorder-core'; //注意如果未引用Recorder变量，可能编译时会被优化删除（如vue3 tree-shaking），请改成 import 'recorder-core'，或随便调用一下 Recorder.a=1 保证强引用

	/** 引入RecordApp **/
	import RecordApp from 'recorder-core/src/app-support/app.js'
	//【所有平台必须引入】uni-app支持文件
	import '../../../uni_modules/Recorder-UniCore/app-uni-support.js'


	/** 可选：App中引入原生录音插件来进行录音，兼容性和体验更好，原生插件市场地址: https://ext.dcloud.net.cn/plugin?name=Recorder-NativePlugin （试用无任何限制）
		在调用RecordApp.RequestPermission之前进行配置，建议放到import后面直接配置（全局生效）
		也可以判断一下只在iOS上或Android上启用，不判断就都启用，比如判断iOS：RecordApp.UniIsApp()==2 */
	RecordApp.UniNativeUtsPlugin = {
		nativePlugin: true
	}; //目前仅支持原生插件，uts插件不可用

	// const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;

	import sendVoice from '../../txasr/sendVoice.js';
	export default {
		config: {
			disableScroll: true
		},
		onBackPress(options) {
			var that = this;
			// 点击虚拟键或者侧滑的时候触发（不允许返回）
			if (options.from === 'backbutton') {
				// 询问弹窗
				that.fnLeaveRoom();
				return true
			}
			// 否则则允许返回
			return false;
		},
		components: {
			keyboard,
			titleBar,
			navbar,
			mifeng,
			mifeng2,
			popRules,
			yanhua,
			keyboardListener
		},
		computed: {
			game_mode_1() {
				return '蜂竞技-' + this.game_mode.split('|')[0]
			},
			game_mode_2() {
				return this.game_mode.split('|')[1]
			},
		},
		watch: {
			allFinished(newVal, oldVal) {
				var that = this;
				that.$eventBus.$emit('callMethodIn_background_type', {
					pageType: 'game_finish'
				})
			},
			passButtonClick(newVal, oldVal) {
				if (newVal == true) {
					this.passBackStyle = 'background: linear-gradient(to bottom, #3552a5, #31ccb0);';
					this.passChildBackStyle = 'background: linear-gradient(to bottom, #31ccb0, #3552a5);';
				} else {
					this.passBackStyle = 'background: linear-gradient(to bottom, #b6359c, #ef0a6a);';
					this.passChildBackStyle = 'background: linear-gradient(to bottom, #b6359c, #ef0a6a);';
				}
			},
			startRecording(newVal, oldVal) {
				var that = this;
				console.log('startRecording 改变了1', newVal);
				if (newVal == true) {
					var current_time = new Date().getTime();
					var diff_time = current_time - that.last_time;
					console.log('diff_time1=' + diff_time)
					if (diff_time > 500) {
						that.startRecord();
						// that.statrAnimation();
					} else {
						that.resetPercent();
						uni.showToast({
							title: '‌操作频繁，‌请稍后再试~',
							icon: 'none'
						})
						that.startRecording = false
						that.last_time = new Date().getTime();
					}
				} else {
					that.last_time = new Date().getTime();
					that.stopRecord();
				}


				if (that.startRecording == false) {
					console.log('结束进度xxxxxx')
					that.resetPercent();
				} else {
					console.log('开始进度vvvvvvv')
					that.color = "#ffaa00";
					that.percentInterval = setInterval(function() {
						that.addPercent();
					}, 1000)
				}
			}
		},
		data() {
			return {
				// 球形倒计时
				modelVale: 0,
				percent: 100,
				percentTimes: 60,
				percentInterval: null,
				color: "#ffaa00",

				deviceType: '',
				confirmTipShow: false,
				//speech 蓝牙
				isMounted: false,
				recpowerx: 0,
				recpowert: "",
				reclogs: [],
				reclogLast: "",


				// 键盘监听
				focusState: true,
				focusState2: false,
				inputValue: 'a',
				inputValue1: 'a',


				focusState: true,
				// 一句话识别
				secretKey: 'V2X3d8ulhirvtkVFtPygTJa0Nl6bCHVe',
				secretId: 'AKIDDYp3Nf0FR4vpeNzW9gK1oYSMCHONMKNB',
				appId: '1323065199',
				filePath: '',
				startRecording: false,

				// 一句话录音结果
				result: '',
				// 更多参数参考腾讯文档,全部兼容
				defaultData: {
					EngSerViceType: '16k_en',
					SourceType: 1,
					VoiceFormat: 'mp3',
					Data: '',
					DataLen: null
				},
				luyin_count: 0,
				base64: '',
				bigBytes: null,







				start_time: '',
				end_time: '',
				last_time: '',

				showTips: false,
				passBackStyle: 'background: linear-gradient(to bottom, #b6359c, #ef0a6a);',
				passChildBackStyle: 'background: linear-gradient(to bottom, #b6359c, #ef0a6a);',
				passButtonClick: false,
				isAllowSub: true, // 允许提交
				game_mode: '极速拼词|联机模式',
				currentKey: '',
				game_finished: 0,
				submitPositionLeft: 0,
				fayinguan_volume_value: uni.getStorageSync('fayinguan_volume_value') >= 0 ? uni.getStorageSync(
					'fayinguan_volume_value') : 1,
				yinyue_volume_value: uni.getStorageSync('yinyue_volume_value') >= 0 ? uni.getStorageSync(
					'yinyue_volume_value') : 1,
				yinxiao_volume_value: uni.getStorageSync('yinxiao_volume_value') >= 0 ? uni.getStorageSync(
					'yinxiao_volume_value') : 1,

				disableSwipeBack: true, // 禁用右滑返回
				game_config: {},
				dev: false, //开发，模式
				dev_btn_show: 0,

				messageTip: '',

				// 当前页面声音属性
				voiceType: '', //word | tip
				voicePlaying: false,

				rules: `每位选手从词库中抽取45个单词在120s内进行速拼比赛。在发音官给出第一个单词发音后允许答题并开始计时，选手可以使用虚拟键盘或外接蓝牙键盘进行答题。
						输入单词完毕，点击键盘下方的提交按钮提交单词，由系统判断正误。
						选手可以点击屏幕“word”或对麦克风说“word”让发音官重新发音。
						选手可以点击“PASS”跳过该题，完成全部单词后回到第一个跳过的单词继续答题，直到完成全部单词。
						系统根据选手拼对单词数量排名，第一名可以获得等于房间人数的积分奖励，第二名为第一名的积分-1，依此类推。
						拼对单词数量为0的选手不计入房间总人数且不获得积分。
						若多人答对单词一致，则根据答对单词的难度进行排名，单词难度根据词频，单词长度，音标长度等进行划分。`,

				// socket
				isSuccess: false,
				allReadyStatus: false, //所有人的准备状态
				isClose: false, //如何为true则不需要进行重连  // 初始化为 false   在 beforeDestroy 生命周期钩子中，你应该将 this.isClose 设置为 true，以防止在组件销毁后继续尝试重新连接 WebSocket。
				heartbeat_count: 0,
				reconnectThrottle: null, //为了避免在短时间内多次重连，可以使用节流机制来限制重连频率。

				audioContext: null, //音频对象
				zhudongClick: false, //是否是用户主动点击播放音频
				no_num: 0, //答对的单词数
				yes_num: 0, //答错的单词数
				answer_status: '', //回答的判断  正确answer_success   错误answer_error
				timeData: {},

				finishShow: false, //完成遮罩
				allFinished: false, //全部完成答题
				yanhuaShow: false,

				loadingStatus: true, //加载状态
				loadingBgColor: '#ffffff60',
				loadingText: '发音官正在发音，请稍作等待',
				loadingColor: "#ff0000",


				currentWordIndex: 0, //当前答题索引

				// 自定义弹框组件
				showConfirmDialog: false,
				confirmMessage: '',
				showAlertDialog: false,
				// alertMessage: '该房间已被群主解散，将为您返回游戏大厅',
				alertMessage: '将为您返回游戏大厅',


				// 答题列表
				test_wordlist: [],

				// 用户回答详情
				test_wordlist: [
					// {
					// 	no: 1,
					// 	word: 'apple',
					// 	voice_word: 'https://cdn.spbcn.org/audio/lexicon/2/immaculate1.mp3',
					// 	voice_origin: 'https://cdn.spbcn.org/audio/lexicon/2/immaculate1.mp3',
					// 	voice_part_of_speech: 'https://cdn.spbcn.org/audio/lexicon/2/immaculate1.mp3',
					// 	voice_definition: 'https://cdn.spbcn.org/audio/lexicon/2/immaculate1.mp3',
					// 	voice_sentence: 'https://cdn.spbcn.org/audio/lexicon/2/immaculate1.mp3',
					// 	voice_success: 'https://cdn.spbcn.org/audio/lexicon/2/immaculate1.mp3',
					// 	voice_error: 'https://cdn.spbcn.org/audio/lexicon/2/immaculate1.mp3',
					// }, 
				],
				isBeginGameClick: false, // 是否点击了开始比赛
				user_info: {}, //用户信息
				//群组信息
				group_info: {
					people_num: 2, //房间最大人数
				},
				allowInput: false, // 是否允许键盘输入
				game_info: {},
				gameStatus: 1, //游戏开始状态 0未开始  1三秒倒计时  2开始 3结束       状态： -1离开 0未准备 1已准备 3开始前的-3秒倒计时 5进行中-120秒倒计时  10等待中 11作题中 100已结束
				canvaswidth: 0, //画布宽
				canvasheight: 0, //画布高

				downtime_3: 3, //点开始后的3秒倒计时，计时结束，开始播放音频，首个音频结束开始120倒计时
				// downtime_120: 120, //点开始后的120秒倒计时，计时结束，比赛结束
				downtime: 120, //点开始后的120秒倒计时，计时结束，比赛结束
				downtime_percentage: 100, //倒计时百分比
				word: 'apple',
				currentWord: 'apple',
				currentAnswer: '',
				scrollHeight: 999999,
				level3Height: 0,
				gameWidth: 0,
				startBtnText: '开始', //开始按钮文本内容
				readyBtnText: '已准备', //已准备按钮文本内容

				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,

				indicator: false,
				yes_count: 0, //已准备人数
				no_count: 0, //未准备人数
				none_count: 0, //空位人数
				current_user_info: {},
				user_list: [
					// {
					// 	user_id: '10001',
					// 	username: '张三',
					// 	status: 1 // 1已准备 0未准备 -1占位
					// }, {
					// 	user_id: '10002',
					// 	username: '李四',
					// 	status: 1 // 1已准备 0未准备 -1占位
					// },
				],

				platform: '',

				donghua: 'donghua_daiji',

				// 答题数据
				"wordlist": [{
					"creator": "http://",
					"updateTime": "2024-05-15 14:50:09",
					"isDelete": 0,
					"id": "13042",
					"spell": "apple",
					"def": "having no stain or blemish",
					"exp": "She had an immaculate record of service.",
					"internationalPhoneticAlphabet": "/ɪˈmækjələt/",
					"level": 2,
					"partofSpeech": "adj.",
					"numberofLetters": "10",
					"syllables": 4,
					"prefixes": "im",
					"suffixes": "te",
					"state": 8,
					"kernel": false,
					"purl": "https://cdn.spbcn.org/audio/lexicon/2/immaculate1.mp3",
					"durl": "https://cdn.spbcn.org/audio/lexicon/2/immaculate2.mp3",
					"eurl": "https://cdn.spbcn.org/audio/lexicon/2/immaculate3.mp3"
				}, {
					"creator": "http://",
					"updateTime": "2024-05-15 14:50:09",
					"isDelete": 0,
					"id": "13042",
					"spell": "oriange",
					"def": "having no stain or blemish",
					"exp": "She had an immaculate record of service.",
					"internationalPhoneticAlphabet": "/ɪˈmækjələt/",
					"level": 2,
					"partofSpeech": "adj.",
					"numberofLetters": "10",
					"syllables": 4,
					"prefixes": "im",
					"suffixes": "te",
					"state": 8,
					"kernel": false,
					"purl": "https://cdn.spbcn.org/audio/lexicon/2/immaculate1.mp3",
					"durl": "https://cdn.spbcn.org/audio/lexicon/2/immaculate2.mp3",
					"eurl": "https://cdn.spbcn.org/audio/lexicon/2/immaculate3.mp3"
				}],
				labelStr: '',
				game_id: ''
			};
		},
		onReady() {
			const that = this
			uni.createSelectorQuery().select('.top-hr').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom;
				that.submitPositionLeft = uni.getSystemInfoSync().windowWidth / 2 - 96 / 2;
			}).exec();
		},
		mounted() {
			const that = this

			this.isMounted = true;
			this.uniPage__onShow(); //onShow可能比mounted先执行，页面准备好了时再执行一次

			that.deviceType = that.$util.getDeviceType();

			setTimeout(function() {
				uni.createSelectorQuery().select('.level_2').boundingClientRect(rect => {
					console.log('rectxxxxxxxxxxxxxxxxxxxxxxxxx', JSON.stringify(rect))
					that.canvaswidth = rect.width;
					that.canvasheight = rect.height;
				}).exec();
			}, 500)

			if ('创建一个音频对象') {
				that.audioContext = uni.createInnerAudioContext();
				that.audioContext.volume = that.fayinguan_volume_value;
				// that.audioContext.loop = true;

				// 监听错误事件
				that.audioContext.onError((res) => {
					console.error('音频加载或播放错误1', res);
					//MediaError（媒体错误）：表示音频播放过程中出现了媒体相关的错误。
					if (res && res.errMsg == 'MediaError') {

					}
					// SrcError（资源路径错误）：表示音频资源路径设置不正确的错误
					if (res && res.errMsg == 'SrcError') {
						uni.showToast({
							title: 'SrcError，请重试~',
							icon: 'error'
						})
					}
					setTimeout(function() {
						that.donghua = 'donghua_daiji';
						that.loadingStatus = false;
						that.zhudongClick = false;
					}, 1000)
				});

				// 监听音频开始播放事件
				that.audioContext.onPlay(() => {
					console.log('音频开始播放');
					if (
						that.audioContext.src != '/static/mp3/success.mp3' &&
						that.audioContext.src != '/static/mp3/error.mp3'
					) {
						console.log('音频开始播放------------------------说话！！！');
						that.answer_status = "";
						that.donghua = 'donghua_shuohua';
						that.loadingStatus = true;
					}
					// 可以在这里进行开始播放后的逻辑处理
				});

				// 监听播放中事件
				that.audioContext.onTimeUpdate(() => {
					// console.log('音频正在播放');
					// 判断是发音官还是音效
					if (
						that.audioContext.src == '/static/mp3/success.mp3' ||
						that.audioContext.src == '/static/mp3/error.mp3'
					) {
						if (uni.getStorageSync('yinxiao_volume_status') == false) {
							that.audioContext.volume = 0;
						} else {
							that.audioContext.volume = uni.getStorageSync('yinxiao_volume_value');
						}
					} else {
						if (uni.getStorageSync('fayinguan_volume_status') == false) {
							that.audioContext.volume = 0;
						} else {
							that.audioContext.volume = uni.getStorageSync('fayinguan_volume_value');
						}
					}
				});

				// 监听音频播放完毕事件
				that.audioContext.onEnded(() => {

					if (
						that.audioContext.src == '/static/mp3/success.mp3' ||
						that.audioContext.src == '/static/mp3/error.mp3'
					) {
						that.answer_status = "";
					}
					if (that.voiceType == 'word' && that.zhudongClick == false) {
						console.log('当前索引：that.currentWordIndex', that.currentWordIndex);
						if ((that.yes_num + that.no_num) == 0 && that.currentWordIndex == 0) {
							var content = '答题开始';
							content = "#" + content + "#";
							that.fnNotify(content);
							that.fnSendMessage(content);
						}
					}

					console.log('音频播放完毕');
					that.donghua = 'donghua_daiji';
					that.loadingStatus = false;
					that.voiceType = '';
					that.voicePlaying = false;
					// 可以在这里进行播放完毕后的逻辑处理
					that.zhudongClick = false;
				});
			}

			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'game'
			})
		},
		/*#ifdef VUE3*/
		unmounted() /*#endif*/ /*#ifndef VUE3*/ destroyed() /*#endif*/ {
			RecordApp.Stop(); //清理资源，如果打开了录音没有关闭，这里将会进行关闭
		},
		onLoad(options) {
			var that = this;



			uni.getSystemInfo({
				success: function(res) {
					const platform = res.platform.toLowerCase(); // 全部转化为小写字母 ios/android
					that.platform = platform
				}
			})
			// // #ifdef APP-PLUS
			// plus.key.addEventListener("keydown", function(e) {
			// 	var keyStr = that.$util.turnKeyCode(e.keyCode);
			// 	that.onKeyup(keyStr);
			// 	console.log('keyStr===========', keyStr);
			// }, false);
			// // #endif 
			// // #ifdef H5
			// document.addEventListener("keydown", function(e) {
			// 	var keyStr = that.$util.turnKeyCode(e.keyCode);
			// 	that.onKeyup(keyStr);
			// }, false);
			// // #endif
			that.user_info = JSON.parse(uni.getStorageSync('USER_INFO'));

			console.log('???')
			console.log(that.user_info);
			that.group_info = JSON.parse(decodeURIComponent(options.group_info));
			that.game_info = JSON.parse(decodeURIComponent(options.game_info));
			that.game_mode = options.game_mode;


			console.log(that.game_mode);

			if (that.game_mode == '') {
				uni.showToast({
					title: '游戏模式异常'
				})
				return false;
			}

			that.test_wordlist = that.$util.deepClone(that.group_info.test_wordlist);

			// 获取房间数据，查看比赛是否结束，如果结束，直接返回上一页
			that.getGroupInfo();
			that.getGameConfigInfo();

			if ('音量监听') {
				// 监听事件
				that.$eventBus.$on('callMethodIn_fayinguan_volume', (data) => {
					console.log('----------------调用指定方法', data, data.volume)
					// 调用指定方法:播放背景音乐
					that.fayinguan_volume_value = data.volume;
					console.log('currentVolume:', that.fayinguan_volume_value);
					that.audioContext.volume = that.fayinguan_volume_value;
				})
				// 监听事件
				that.$eventBus.$on('callMethodIn_yinyue_volume', (data) => {
					console.log('----------------调用指定方法', data, data.volume)
					// 调用指定方法:播放背景音乐
					that.yinyue_volume_value = data.volume;
					console.log('currentVolume:', that.yinyue_volume_value);
					that.audioContext.volume = that.yinyue_volume_value;
				})
				// 监听事件
				that.$eventBus.$on('callMethodIn_yinxiao_volume', (data) => {
					console.log('----------------调用指定方法', data, data.volume)
					// 调用指定方法:播放背景音乐
					that.yinxiao_volume_value = data.volume;
					console.log('currentVolume:', that.yinxiao_volume_value);
					that.audioContext.volume = that.yinxiao_volume_value;
				})
			}
			if ('声音状态监听') {
				// 监听事件
				that.$eventBus.$on('callMethodIn_fayinguan_volume_status', (data) => {
					if (that.voiceType == 'word' && that.voicePlaying == true) {
						if (data.status == false) {
							that.audioContext.stop();
						}
					}
				})

				// 监听事件
				that.$eventBus.$on('callMethodIn_yinxiao_volume_status', (data) => {
					if (that.voiceType == 'tip' && that.voicePlaying == true) {
						if (data.status == false) {
							that.audioContext.stop();
						}
					}
				})
			}

			that.init();
		},
		onShow: function() {
			if (this.isMounted) this.uniPage__onShow(); //onShow可能比mounted先执行，页面可能还未准备好

			var that = this;
			if (this.focusState == true) {
				this.focusState = false;
				this.focusState2 = true;
			} else {
				this.focusState = true;
				this.focusState2 = false;
			}
			that.getGameConfigInfo();

			that.$http.getGroupInfo({
				'group_id': that.group_info.id,
				'game_mode': that.game_mode
			}).then(res => {
				if (res.code === 200) {
					// 获得标签
					const obj = this.$util.typeList().find(item => item.key === res.data.test_attribute)
					const typeStr = obj ? `${obj.value}` : ''
					that.labelStr = `${typeStr}${res.data.test_label}`
					// 获得game_id
					this.game_id = res.data.game_id

					if (res.data.is_finished == 0) {

					} else {
						that.finishShow = true;
						that.allFinished = true;

						// 判断是不是优胜
						var _best_user_info = res.data._best_user_info;
						// console.log('_best_user_info', _best_user_info)
						setTimeout(function() {
							if (
								that.user_info.id == _best_user_info['user_id'] &&
								_best_user_info['yes_num'] > 0
							) {
								if (that.game_mode == '极速拼词|联机模式') {
									that.yanhuaShow = true;
								}
							}
						});
					}
				}
			})

			that.$eventBus.$emit('callMethodIn_background_type', {
				pageType: 'game_page'
			})
		},
		beforeDestroy() {
			var that = this;
			console.log('beforeDestroy')

			that.isClose = true;

			if (this.socketTask) {
				this.socketTask.close();
			}
			clearInterval(this.timer);
			that.timer = null;
		},
		// onUnload() {
		// 	var that = this;
		// 	console.log('onUnload');
		// 	clearInterval(that.timer);
		// 	that.timer = '';
		// 	that.isClose = true;
		// 	that.socketTask.close();
		// },
		methods: {
			addPercent() {
				var that = this;
				that.percentTimes--;
				console.log('进度条' + that.percentTimes, "当前进度：" + that.percent)
				if (that.percentTimes == 0) {
					that.resetPercent();
					return false;
				} else {
					if (that.percentTimes >= 20) {
						that.percent -= 1.66;
						that.color = "#ffaa00";
					} else {
						that.color = "#ffaa00";
						that.percent -= 1.66;
					}
				}
			},

			resetPercent() {
				var that = this;
				that.startRecording = false;
				that.color = "#ffaa00";

				clearInterval(that.percentInterval)
				that.percentInterval = null;
				that.percentTimes = 60;
				that.percent = 100;
			},

			// START ------ speech 录音（蓝牙耳机收音）
			uniPage__onShow() { //页面onShow时【必须调用】的函数，传入当前组件this
				RecordApp.UniPageOnShow(this);
			},


			// 请求权限
			recReq() {
				this.reclog("正在请求录音权限...");
				RecordApp.UniWebViewActivate(this); //App环境下必须先切换成当前页面WebView
				RecordApp.RequestPermission(() => {
					this.reclog("已获得录音权限，可以开始录音了", 2);
					this.recStart()
				}, (msg, isUserNotAllow) => {
					if (isUserNotAllow) { //用户拒绝了录音权限
						//这里你应当编写代码进行引导用户给录音权限，不同平台分别进行编写
						this.startRecording = false
						this.showAuthTip()
					}
					this.reclog(
						(isUserNotAllow ? "isUserNotAllow," : "") + "请求录音权限失败：" + msg, 1);
				});
			},

			showAuthTip() {
				// 提示弹窗
				this.confirmTipShow = true
				this.confirmTipMsg = 'App需要您的同意，才能访问麦克风进行语音识别转换/录制音频，如禁止将无法识别语音转换/录制音频发送，请在“设置”中允许“拼词之星”访问麦克风'
				this.confirmTipConfirmText = '确定'
				this.confirmTipCancelText = ''
			},

			// 开始录音
			recStart() {
				var that = this;

				that.luyin_count = 0;
				that.bigBytes = new Uint8Array(0)

				var file = Date.now() + ".mp3";
				this.filePath = "";

				RecordApp.UniWebViewActivate(this); //App环境下必须先切换成当前页面WebView
				RecordApp.Start({
					type: "mp3",
					sampleRate: 16000,
					bitRate: 16,
					onProcess: (buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) => {
						this.recpowerx = powerLevel;
						this.recpowert = duration + " / " + powerLevel;
					},
					onProcess_renderjs: `function(buffers,powerLevel,duration,sampleRate,newBufferIdx,asyncEnd){
						//App中是在renderjs中进行的可视化图形绘制
						if(this.waveView){
							this.waveView.input(buffers[buffers.length-1],powerLevel,sampleRate);
						}
					}`,
					takeoffEncodeChunk: (chunkBytes) => {
						that.luyin_count++;
						if ('base64音频文件专用') {
							var temp = new Uint8Array(chunkBytes.length + that.bigBytes.length)
							temp.set(that.bigBytes);
							temp.set(chunkBytes, that.bigBytes.length);
							that.bigBytes = temp
						}
					},
					start_renderjs: `function(){
						//App中可以放一个函数，在Start成功时renderjs中会先调用这里的代码，this是renderjs模块的this（也可以用This变量）
						//放一些仅在renderjs中才生效的事情，比如初始化，不提供也行
					}`,
					stop_renderjs: `function(aBuf,duration,mime){
						//App中可以放一个函数，在Stop成功时renderjs中会先调用这里的代码，this是renderjs模块的this（也可以用This变量）
						this.audioData=aBuf; //留着给Stop时进行转码成wav播放
					}`
				}, () => {
					this.reclog("录制中", 2);

					//创建音频可视化图形绘制，App环境下是在renderjs中绘制，H5、小程序等是在逻辑层中绘制，因此需要提供两段相同的代码（宽高值需要和canvas style的宽高一致）
					RecordApp.UniFindCanvas(this, [".recwave-WaveView"], `
						this.waveView=Recorder.WaveView({compatibleCanvas:canvas1, width:300, height:100});
					`, (canvas1) => {
						this.waveView = Recorder.WaveView({
							compatibleCanvas: canvas1,
							width: 300,
							height: 100
						});
					});
				}, (msg) => {
					this.reclog("开始录音失败：" + msg, 1);
				});
			},

			// 停止录音
			recStop() {
				const that = this
				RecordApp.Stop((aBuf, duration, mime) => {
					that.base64 = uni.arrayBufferToBase64(that.bigBytes.buffer)
					that.end_time = new Date().getTime();
					var diff_time = that.end_time - that.start_time;
					if (that.end_time - that.start_time < 1000) {
						uni.showToast({
							title: '录音时长太短',
							icon: 'error'
						})
					} else {
						that.fn_tx_asr();
					}
				}, (msg) => {
					that.reclog("结束录音失败：" + msg, 1);
				});
			},

			// 腾讯一句话 uniapp
			async fn_tx_asr() {
				var that = this;
				// base64录音内容
				that.defaultData.Data = that.base64;
				// 录音长度
				that.defaultData.DataLen = uni.base64ToArrayBuffer(that.base64).byteLength;
				// 一句话识别返回结果
				const res = await sendVoice({
					secretId: that.secretId,
					secretKey: that.secretKey,
					payload: that.defaultData
				});
				var content = res.Response.Result;

				console.log(content)

				// 显示识别结果
				if (that.dev_btn_show) {
					uni.showToast({
						title: '识:' + content
					})
				}
				setTimeout(function() {
					if (content) {
						var result = that.$util.fnCheckResultOnlyTips(content);
						if (that.dev_btn_show) {
							uni.showToast({
								title: '判：' + result,
								icon: 'none',
								position: 'top',
							})
						}

						// 如果倒计时大于2秒，执行后续逻辑
						if (that.downtime > 2) {
							if (result == 'word') {
								that.fnPlayWordVoiceV2();
							}
						}
					}
				}, that.dev_btn_show ? 500 : 100)
			},

			reclog(msg, color) {
				var now = new Date();
				var t = ("0" + now.getHours()).substr(-2) +
					":" + ("0" + now.getMinutes()).substr(-2) +
					":" + ("0" + now.getSeconds()).substr(-2);
				var txt = "[" + t + "]" + msg;
				console.log(txt);
				this.reclogs.splice(0, 0, {
					txt: txt,
					color: color
				});
				this.reclogLast = {
					txt: txt,
					color: color
				};
			},

			// END ------ speech 录音（蓝牙耳机收音）

			speechClicked() {
				var that = this;
				that.startRecording = !that.startRecording;
			},
			// 键盘监听
			focusClicked() {
				this.focusState = !this.focusState;
				this.focusState2 = !this.focusState2;
			},

			// 一句话识别》》》》》》》》》》》》》》》》》》》》》》》》》》》》
			stopOtherState() {
				this.donghua = 'donghua_daiji';
				// 重置状态
				this.zhudongClick = false;
				this.playType = '';
			},
			init() {
				var that = this;
			},

			startRecord() {
				var that = this;
				that.start_time = new Date().getTime();
				that.stopOtherState();
				if (that.audioContext) {
					that.audioContext.stop();
				}
				that.recReq()
			},

			stopRecord() {
				var that = this;
				that.recStop()
			},

			playRecord() {
				let that = this;
				if (that.filePath == '') {
					uni.showToast({
						title: '没有录音可以播放，请录音',
						position: "bottom"
					});
					return;
				}

				innerAudioContext.src = this.filePath;
				innerAudioContext.play();

				uni.showToast({
					title: '播放录音',
					position: "bottom"
				});
			},
			// 一句话识别《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《《

			voicePlay(value) {
				var that = this;
				if (value.playType == 'play') {
					that.donghua = 'donghua_shuohua';
				} else {
					setTimeout(function() {
						that.donghua = 'donghua_daiji';
					}, 500);
				}
			},
			// 获取游戏配置信息
			getGameConfigInfo() {
				var that = this;
				that.$http.getGameConfigInfo({
					'game_id': that.game_info.id,
					'game_mode': that.game_mode
				}).then(res => {
					if (res.code === 200) {
						that.game_config = res.data;
						// that.dev = that.game_config.dev;
						that.dev_btn_show = that.game_config.dev_btn_show;
					}
				})
			},

			// 获取房间数据
			getGroupInfo() {
				var that = this;
				console.log('getGroupInfo', '1111111111111111111')
				that.$http.getGroupInfo({
					'group_id': that.group_info.id,
					'game_mode': that.game_mode
				}).then(res => {
					if (res.code === 200) {
						console.log('xxxxxxxxxxxxxxxxx109991xxxxxxxxxxxxxxxxxxxxx', res.data)
						if (res.data.is_finished == 0) {
							// if(res.data.game_mode=='极速拼词|训练模式'){
							// console.log('xxxxxxxxxxxxxxxxx109991xxxxxxxxxxxxxxxxxxxxx', res.data.test_wordlist)
							if (res.data.test_wordlist.length == 0) {
								console.log('xxxxxxxxxxxxxxxxx109991xxxxxxxxxxxxxxxxxxxxx')
								uni.showToast({
									title: '该词库暂无数据，请换个词库试试',
									icon: 'none'
								})
								return false;
							}
							// }
							// 连接socket
							that.connectSocket()
						} else {
							that.finishShow = true;
							that.allFinished = true;

							// 判断是不是优胜
							var _best_user_info = res.data._best_user_info;
							// console.log('_best_user_info', _best_user_info)
							setTimeout(function() {
								if (that.user_info.id == _best_user_info['user_id'] && _best_user_info[
										'yes_num'] > 0) {
									if (that.game_mode == '极速拼词|联机模式') {
										that.yanhuaShow = true;
									}
								}
							});
						}
					}
				})
			},
			// 点击软键盘
			fnClickKeyboard(data) {
				var that = this;
				var currentKeyStr = data.target;
				if (currentKeyStr != 'del' && this.$util.isallowInput(currentKeyStr)) {
					this.currentAnswer += currentKeyStr;
				}
			},
			listenOnKeydown(value) {
				if (this.platform === 'android') {
					var that = this;
					if (value.key == " " && !that.loadingStatus) {
						this.startRecording = !this.startRecording;
						console.log('语音识别开始')
					} else {
						that.onKeydown(value.key, value.code);
					}
				}
			},
			// 全局监听外接键盘点击抬起事件
			// listenOnKeyup(value) {
			// 	if (this.platform === 'android') {
			// 		var that = this;
			// 		console.log(value, "=====================")
			// 		if (value.key == " ") { // 语音识别抬起结束
			// 			that.startRecording = false;
			// 			console.log('语音识别结束')
			// 		}
			// 	}
			// },


			// 键盘监听方法Start==========================
			inputChange: function(event) {
				var value = event.target.value;
				console.log('this.value================', value)
				var that = this;
				if (value.includes(" ") && !this.loadingStatus) {
					this.startRecording = !this.startRecording;
					setTimeout(function() {
						that.inputValue = 'a';
						that.inputValue1 = 'a';
					}, 50);
				} else {
					if (value == "" && this.downtime > 0 && this.gameStatus > 3) {
						console.log('跳过==================')
						this.fnPass();
						setTimeout(function() {
							that.inputValue = 'a';
							that.inputValue1 = 'a';
						}, 50);
					} else if (value.length == 2) {
						var newValue = value.charAt(value.length - 1);
						if (newValue == 1 || newValue == 2 || newValue == 3) {
							newValue = newValue + '';
						}
						this.processingValue(newValue);
						setTimeout(function() {
							that.inputValue = 'a';
							that.inputValue1 = 'a';
						}, 50);
					} else {
						setTimeout(function() {
							that.inputValue = 'a';
							that.inputValue1 = 'a';
						}, 50);
					}
				}
			},
			// enter 点击事件
			enterClicked() {
				uni.hideKeyboard(); //隐藏软键盘	
				if (this.focusState == true) {
					this.focusState = false;
					this.$nextTick(function() {
						this.focusState2 = true;
					});
				} else {
					this.focusState2 = false;
					this.$nextTick(function() {
						this.focusState = true;
					});
				}
				this.processingValue('Enter')
			},
			// 处理点击回调
			processingValue(value) {
				console.log('value', value);
				this.onKeydown(value, '');
			},
			// 键盘监听End==========================


			// 全局监听外接键盘点击事件
			onKeydown(value, code) {
				console.log('value====================', value);
				if (this.gameStatus <= 3) {
					if (value == '?' || (value == 'Shift' && code == 'ShiftRight')) { // 准备
						if (this.user_info.id != this.group_info.user_id) {
							if (this.current_user_info.status == 0) {
								this.fnMyReady('准备就绪');
							} else if (this.current_user_info.status == 1) {

								this.fnMyReady('取消准备');
							}
						}
					} else if (value == 'Shift' && code == 'ShiftLeft') { // 抢答
						return;
					} else if (value == 'Enter' && this.user_info.id == this.group_info.user_id) { // 开始
						if (this.showTips == true) {
							this.showTips = false;
						} else {
							this.fnStart()
						}
					} else if (value == 'Enter' && this.user_info.id != this.group_info.user_id) {
						if (this.showTips == true) {
							this.showTips = false;
						}
					}
				} else {
					if (value == 'Enter') {
						if (this.showMessageView == true) {
							this.showMessageView = false;
						} else if (this.allFinished == true) {
							this.finishShow = false; //完成遮罩
							this.allFinished = false; //全部完成答题	
							this.fnFinishGame();
						} else { // 游戏中点enter 没有弹窗就提交答案 
							this.fnSubmit();
						}
					} else if (this.loadingStatus == false && this.allowInput == true) {
						console.log('this.gameStatus', this.gameStatus);
						if (value == 'Space') {
							console.log('语音识别开始')
						} else {
							if (value == "Backspace" && this.downtime > 0) {
								this.fnPass();
							} else if (this.$util.isallowInput(value)) {
								if (value == '1') { // 发音
									this.fnPlayWordVoiceV2();
								} else if (value == '2') { // 定义
									return;
								} else if (value == '3') { // 例句
									return;
								} else {
									var keyData = {
										e: {
											target: {
												dataset: {
													val: value
												}
											}
										}
									}
									this.$refs.keyboard.tapKeyboard(keyData.e);
									var _this = this;
									this.currentKey = value;
									setTimeout(() => {
										_this.currentKey = "";
									}, 300);
								}
							}
						}
					}
				}

			},

			fnCancelAlert() {
				var that = this;

				that.showAlertDialog = false;
				setTimeout(function() {
					// uni.redirectTo({
					// 	url: '/pages/games/index'
					// });
					uni.navigateBack({
						delta: 1, // 默认值是1，表示关闭当前页面
					});
				}, 500)
			},

			fnLeaveRoomV2() {
				var that = this;

				// 清除心跳定时器
				if (that.timer) {
					clearInterval(that.timer);
					that.timer = '';
				}

				that.fnConfirmLeave();
			},

			// 离开房间：
			// 开始前：如果是选手离开，则相当于退出房间，如果是群主离开房间，相当于是解散房间
			// 开始后：离开相当于离线，不退出
			fnLeaveRoom() {
				var that = this;

				// 清除心跳定时器
				if (that.timer) {
					clearInterval(that.timer);
					that.timer = '';
				}

				if (that.group_info.user_id == that.user_info.id) {
					// 如果是群主
					// 游戏未开始
					if (that.gameStatus <= 1) {
						that.confirmMessage = "游戏未开始，离开房间后房间将解散，确定要离开房间吗？";
					} else {
						that.confirmMessage = "游戏已开始，确定要离开房间吗？";
					}
				} else {
					// 如果不是群主
					// 游戏未开始
					if (that.gameStatus <= 1) {
						if (that.gameStatus == 1) {
							that.confirmMessage = "游戏未开始，确定要离开房间吗？离开房间将取消准备";
						} else {
							that.confirmMessage = "游戏未开始，确定要离开房间吗？";
						}
					} else {
						that.confirmMessage = "游戏已开始，确定要离开房间吗？";
					}
				}

				that.showConfirmDialog = true;
			},

			// 确认离开房间
			fnConfirmLeave() {
				var that = this;

				var keyword = '离开房间';
				that.showConfirmDialog = false;

				// 如果是群主
				if (that.group_info.user_id == that.user_info.id) {
					// 游戏未开始
					if (that.gameStatus <= 1) {
						keyword = "解散房间";
					} else {
						keyword = "离开房间";
					}
				} else {
					// 如果不是群主
					// 游戏未开始
					if (that.gameStatus <= 1) {
						if (that.gameStatus == 1) {
							that.fnMyReady('取消准备');

							keyword = "退出房间";
						} else {
							keyword = "退出房间";
						}
					} else {
						keyword = "离开房间";
					}
				}

				that.showAlertDialog = true;

				setTimeout(function() {
					// 离开房间
					var content = "#" + keyword + "#-" + JSON.stringify(that.test_wordlist);
					that.fnNotify("#" + keyword + "#");
					//发送消息
					that.fnSendMessage(content);
				}, 500)

				setTimeout(function() {
					that.isClose = true;
					that.socketTask.close();
					// uni.navigateBack({
					// 	delta: 2, // 默认值是1，表示关闭当前页面
					// 	animationType: 'slide-in-bottom', // 右侧滑入效果
					// 	animationDuration: 300 // 动画时长300毫秒
					// });
				}, 1000)
			},

			// 取消离开房间弹框
			fnCancelLeave() {
				var that = this;

				that.showConfirmDialog = false;
			},

			// //开始
			// start() {
			// 	this.fnNotify(this.downtime)
			// 	this.$refs.countDown.start();
			// },
			// // 暂停
			// pause() {
			// 	this.$refs.countDown.pause();
			// },
			// // 重置
			// reset() {
			// 	this.$refs.countDown.reset();
			// },
			// onChange(e) {
			// 	console.log(e)
			// 	console.log('更新倒计时')
			// 	var that = this;

			// 	// 更新倒计时
			// 	that.downtime = e.seconds + e.minutes * 60

			// 	// 更新倒计时百分比
			// 	that.downtime_percentage = parseInt(that.downtime / 120 * 100);
			// },
			// onFinish() {
			// 	console.log('倒计时结束')
			// },

			fnCopyInviteUrl() {
				// 注意key=jspc
				this.donghua = 'donghua_daiji';
				const url =
					`${this.$config.h5Link}share?key=jspc&roomNum=${this.group_info.id}&gameId=${this.game_id}`
				this.$share.copyInviteUrl(url)
			},
			fnWeixinInvite() {
				const url =
					`${this.$config.h5Link}share?key=jspc&roomNum=${this.group_info.id}&gameId=${this.game_id}`
				this.$share.weixinInvite(url, '极速拼词')
			},

			//1姓名 通过正则找到电话
			extractPhoneNumber(text) {
				const reg = /\d{11}/;
				const match = text.match(reg);
				const phoneNumber = match ? match[0] : '';
				return phoneNumber;
			},
			// 4去除特殊字符和前缀标识
			cleanText(text) {
				const cleanedText = text.replace(/\/|姓名：|手机号：|收货地址：|详细地址：/g, '');
				return cleanedText;
			},

			// 提交答案
			fnSubmit(data) {
				var that = this;

				if (that.isSuccess == false) {
					uni.showToast({
						'title': 'socket未准备好',
						'icon': 'error'
					})
					return false;
				}

				that.stopAllFn()
				var word_info = that.test_wordlist[that.currentWordIndex];
				if ('提交答案' && that.isAllowSub == true) {
					that.isAllowSub = false;
					setTimeout(function() {
						that.isAllowSub = true;
					}, 2000);
					if (that.currentAnswer == '') {
						that.fnNotify('请先作答！');
						return false;
					}
					// 判斷是否正確
					var content = "#提交答案#-" + that.downtime + ":" + word_info.word + ":" + that.currentAnswer + ":" + that
						.currentWordIndex;
					if (word_info.word.toLowerCase() == that.currentAnswer.toLowerCase()) {
						that.donghua = 'donghua_keai';
						setTimeout(function() {
							that.audioContext.stop();
							that.answer_status = "success";
							that.audioContext.src = '/static/mp3/success.mp3';
							that.audioContext.play();
						}, 100)
					} else {
						that.donghua = 'donghua_ku';
						setTimeout(function() {
							that.audioContext.stop();
							that.answer_status = "error";
							that.audioContext.src = '/static/mp3/error.mp3';
							that.audioContext.play();
						}, 100)
					}

					that.fnNotify(content);
					//发送消息
					that.fnSendMessage(content);

				}
			},

			// 跳过一题
			fnPass() {
				var that = this;
				that.passButtonClick = true;
				setTimeout(function() {
					that.passButtonClick = false;
				}, 500);
				that.zhudongClick = true;
				that.test_wordlist.push(that.test_wordlist[that.currentWordIndex]);
				that.fnNext();
			},

			// 下一题
			fnNext() {
				var that = this;
				that.currentAnswer = "";
				that.loadingStatus = true;
				if (that.currentWordIndex + 1 >= that.test_wordlist.length) {
					that.loadingStatus = false;
					// uni.showToast({
					// 	title: '题已答完',
					// 	icon: 'none',
					// });

					// 题已答完
					var content = "#题已答完#-" + (120 - that.downtime);
					that.fnNotify(content);
					//发送消息
					that.fnSendMessage(content);
					return false;
				}

				that.currentWordIndex++;
				if (that.audioContext) {
					that.audioContext.stop();
					console.log('that.downtime', that.downtime)
					if (that.downtime < 1) {
						return false;
					}
					console.log('that.test_wordlist[that.currentWordIndex].word', that.test_wordlist[that
						.currentWordIndex].word)
					that.audioContext.src = that.$util.wordVoiceUrl(that.test_wordlist[that.currentWordIndex].word);

					console.log('播放音频啦！！！')
					that.audioContext.play();
				}
			},

			// 消息提示
			fnNotify(msg) {
				var that = this;
				msg = that.game_mode + msg;

				if (that.dev_btn_show == false) {
					return false;
				}
				that.$refs.uNotify.close()
				setTimeout(function() {
					that.$refs.uNotify.show({
						top: 50,
						type: 'error',
						color: '#000',
						bgColor: '#e8e8e8',
						message: msg,
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
				}, 100)
			},

			// 开始按钮
			fnStart() {
				var that = this;

				console.log('11111  fnStart')
				// if (that.isBeginGameClick == true) {
				// 	setTimeout(function() {
				// 		that.isBeginGameClick = false;
				// 	}, 10000);
				// 	return;
				// }
				// that.isBeginGameClick = true;
				// setTimeout(function() {
				// 	that.isBeginGameClick = false;
				// }, 10000);

				if (uni.getStorageSync('internetStatus') == false) {
					uni.showToast({
						'title': '网络异常',
						'icon': 'error'
					})
					return false;
				}

				if (that.isSuccess == false) {
					uni.showToast({
						'title': 'socket未准备好',
						'icon': 'error'
					})
					return false;
				}

				console.log('22222  fnStart')
				if (that.game_mode == '极速拼词|训练模式') {
					if (that.yes_count != that.group_info.people_num) {
						return false;
					}
				}
				if (that.game_mode == '极速拼词|联机模式') {
					if (that.yes_count != that.group_info.people_num) {
						that.fnNotify('还有人未准备');
						return false;
					}
				}

				that.loadingStatus = true;
				that.loadingText = '发音官正在发音，请稍作等待';
				that.loadingBgColor = "#ffffff60";
				that.loadingColor = "#ff0000";
				that.color = "#ffaa00";


				that.gameStatus = 2;
				var content = '游戏开始';
				content = "#" + content + "#";
				that.fnNotify(content);
				that.fnSendMessage(content);

			},

			// 我准备
			fnMyReady(content) {
				var that = this;
				if (that.isSuccess == false) {
					uni.showToast({
						'title': 'socket未准备好',
						'icon': 'error'
					})
					return false;
				}

				if (that.user_info.id == '') {
					return false;
				}

				content = "#" + content + "#";
				that.fnNotify(content);
				that.fnSendMessage(content);
			},

			fnSendMessage(content) {
				var that = this;

				content = that.game_mode + content;
				console.log('发送消息：' + content)

				//发送消息
				var message = {
					'type': 'chatMessage',
					'data': {
						"mine": {
							"username": that.user_info.username,
							"avatar": that.user_info.avatar,
							"id": that.user_info.id,
							"mine": true,
							"type": "group",
							"content": content
						},
						"to": {
							"id": that.group_info.id,
							"user_id": that.user_info.id,
							"avatar": that.group_info.avatar,
							"sign": that.group_info.sign,
							"groupname": that.group_info.groupname,
							"name": that.group_info.groupname,
							"type": "group"
						}
					}
				};
				that.sendSocketMessage(JSON.stringify(message)).then(res => {
					// console.log('测试数据成功~~~~~~~~~~~~')
				}).catch(res => {
					console.log('发送失败')
					console.log((res))
				})
			},

			// // 准备按钮
			// fnReady(item, index) {
			// 	var that = this;
			// 	var content = '';
			// 	if (item.user_id == '') {
			// 		return false;
			// 	} else {
			// 		if (item.status == 0) {
			// 			content = '准备就绪';
			// 		}
			// 		if (item.status == 1) {
			// 			content = '取消准备';
			// 		}
			// 	}
			// 	content = "#" + content + "#";
			// 	that.fnNotify(content);
			// 	that.fnSendMessage(content);
			// },

			//连接websocket
			connectSocket() {
				let that = this;
				console.log('调用连接websocket')
				let token = uni.getStorageSync('TOKEN_YX');
				if (!that.user_info.id || !that.group_info.id) {
					that.fnNotify('参数异常');
					return false;
				}
				that.socketTask = uni.connectSocket({
					url: `ws://${that.$config.webSocketIp}:9999?token=${token}&user_id=${that.user_info.id}&group_id=${that.group_info.id}`,
					success(res) {
						console.log("websocket连接成功1");
					},
					fail(err) {
						console.log("报错", err);
					}
				});
				that.socketTask.onOpen(function(res) {
					uni.hideLoading()
					console.log('WebSocket连接已打开！');
					that.isSuccess = true;
					that.heart()

					//发送消息
					setTimeout(function() {
						var content = '进入房间';
						content = "#" + content + "#-" + that.user_info.id;
						that.fnSendMessage(content);
					}, 500)
				})

				that.socketTask.onMessage(function(res) {
					// console.log('收到服务器内容：' + res.data);
					that.handlerServiceMsg(JSON.parse(res.data)) //这里是对获取到的数据进行操作
				});


				that.socketTask.onError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
					that.fnNotify('WebSocket连接打开失败，请检查！');
					that.isSuccess = false; // 在这里设置为 false

					//进入重新连接
					that.reconnect();
				})
				// // 监听连接关闭 -
				that.socketTask.onClose((e) => {
					console.log('WebSocket连接关闭！');
					clearInterval(that.timer)
					that.timer = null;
					that.isSuccess = false; // 在这里设置为 false
					that.reconnect()
				})
				console.log(that.socketTask)
			},

			//进入重新连接
			reconnect() {
				var that = this;
				console.log('that.isClose', that.isClose)
				if (that.isClose == true) {
					return false;
				}
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}

				if (uni.getStorageSync('internetStatus') == true) {
					uni.showToast({
						title: '网络恢复',
						icon: 'none'
					})
					this.getGroupInfo();
				}

				console.log('进入断线重连', uni.getStorageSync('internetStatus'));

				// 如果 socketTask 存在并且连接是打开的，显式关闭它
				if (this.socketTask && this.socketTask.readyState === 1) { // WebSocket.OPEN
					this.socketTask.close();
				}

				this.isSuccess = false; // 在这里设置为 false
				this.socketTask = null;

				// 节流重连
				if (!this.reconnectThrottle) {
					this.reconnectThrottle = setTimeout(() => {
						this.reconnectThrottle = null;
						console.log("节流重连")
					}, 3000); // 5秒后重试
				}
			},

			//发送消息
			sendSocketMessage(msg) {
				if (this.isSuccess) {
					return new Promise((reslove, reject) => {
						this.socketTask.send({
							data: msg,
							success(res) {
								// console.log('发送成功')
								reslove(res)
							},
							fail(res) {
								console.log('发送失败')
								console.log(res)
								reject(res)
							}
						});
					})
				} else {
					// 显示错误提示
					this.fnNotify('WebSocket连接未建立，请稍后再试');
				}
			},

			//心跳
			heart() {
				let that = this;
				clearInterval(this.timer);
				this.timer = null;

				this.timer = setInterval(() => {
					console.log('心跳！！！')
					that.sendSocketMessage(JSON.stringify({
						"game": "jspc",
						"heartbeat": this.heartbeat_count,
						"type": "heartbeat",
						"start_time": Date.now() / 1000
					})).then(res => {
						// console.log('心跳成功')
					}).catch(res => {
						console.log('发送失败')
						console.log((res))
					})
				}, 5000)
			},

			//处理服务器返回数据
			handlerServiceMsg(data) {
				var that = this;

				// 网速检测
				if (data.type && data.type == 'heartbeat') {
					that.$util.checkInternetSpeed(data);
					return false;
				}

				if (data.type && data.type == 'ping') {
					return false;
				}
				var content = data.content;

				// console.log('################处理服务器返回数据:data-----', data, content)

				// 拼词竞技
				if (content.includes(that.game_mode) && that.game_mode == '拼词竞技|训练模式') {
					that.fn_PCJJ_offline(data);
				}
				if (content.includes(that.game_mode) && that.game_mode == '拼词竞技|联机模式') {
					that.fn_PCJJ_online(data);
				}

				// 极速拼词|联机模式
				if (content.includes(that.game_mode) && that.game_mode == '极速拼词|训练模式') {
					that.fn_JSPC_offline(data); //暂用online
				}
				if (content.includes(that.game_mode) && that.game_mode == '极速拼词|联机模式') {
					that.fn_JSPC_online(data);
				}
			},

			// 极速拼词|联机模式
			fn_JSPC_online(data) {
				var that = this;

				// console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')

				var content = data.content;

				if (that.game_finished == 1) {
					return false;
				}

				// 更新数据
				if (data._total_user_info) {
					that.user_list = data._total_user_info;
					// console.log(
					// 	'################-----------------------------------------------------------------user_list-----',
					// 	that.user_list)

					// 开始答题前：统计人数
					that.yes_count = 0;
					that.no_count = 0;
					that.none_count = 0;
					for (var i = 0; i < that.group_info.people_num; i++) {
						var item = that.user_list[i];

						// console.log('item--', item)

						if (item) {
							if (item.user_id == that.user_info.id) {
								that.current_user_info = item;
								that.gameStatus = item.status;
							}

							if (item.status >= 1) {
								that.yes_count++;
							} else {
								that.no_count++;
							}
						} else {
							that.user_list.push({
								user_id: '',
								username: '空位置',
								status: -1 // 1已准备 0未准备 -1占位
							});
							that.none_count++;
						}
					}

					that.fnNotify("gameStatus = " + that.gameStatus);
				}

				// 进入房间
				if (content.includes('进入房间')) {
					that.loadingStatus = false;
					var enterer_userId = content.split('-')[1];
					// console.log('################data', data)
					if (enterer_userId == that.user_info.id) {
						that.test_wordlist = data._test_wordlist;

						// console.log('################user_list-----', data._test_wordlist)

						// console.log('是本人！！！！！！！！！！！！！！！！！！', enterer_userId)
						// 开始答题后：统计答题正确率
						for (var i = 0; i < that.user_list.length; i++) {
							if (that.user_info.id == that.user_list[i]['user_id']) {
								var answer_list = that.user_list[i]['answer_list'];
								if (answer_list && answer_list.length > 0) {
									// console.log('answer_list', answer_list)
									var yes_num = 0;
									var no_num = 0;
									for (var j = 0; j < answer_list.length; j++) {
										var answer = answer_list[j];
										var answerItem = answer.split(':');
										// console.log('answerItem======', answerItem)
										if (answerItem[1] == answerItem[2]) {
											yes_num++;
										} else {
											no_num++;
										}
									}
									that.yes_num = yes_num;
									that.no_num = no_num;

									// console.log('answerItem======', that.yes_num, that.no_num, that.test_wordlist.length)

									if (that.yes_num + that.no_num == that.test_wordlist.length) {
										that.currentWordIndex = data._current_index;

										console.log(
											'!!!!!!!!!!!!!!!!!!!!!!!!已答完============================================')
										that.finishShow = true;
									} else {
										that.currentWordIndex = data._current_index + 1;
									}
								}
							}
						}
					}
				}

				// 3秒倒计时， 游戏开始
				if (content.includes('3秒倒计时')) {
					that.gameStatus = 3;
					that.loadingStatus = true;
					that.downtime_3 = 3 - data._downtime3;
					that.startBtnText = that.downtime_3 + 1;
					that.readyBtnText = that.downtime_3 + 1;
					// console.log(that.downtime_3)

					// that.fnNotify(content);
					if (that.downtime_3 == 0) {
						that.loadingStatus = false;
						setTimeout(function() {
							that.gameStatus = 5;
							that.fnPlayWordVoice();
						}, 500)
					}
				}

				// 120秒倒计时， 游戏结束
				if (content.includes('120秒倒计时')) {
					that.gameStatus = 5;
					that.downtime = 120 - ((data._downtime120 >= 120) ? 120 : data._downtime120);
					that.downtime_percentage = parseInt(that.downtime / 120 * 100);
					this.allowInput = true;
					if (that.downtime == 0) {
						that.stopAllFn()
						this.allowInput = false;
						console.log('时间到时间到时间到时间到时间到时间到时间到时间到时间到时间到时间到')
						if (that.audioContext) {
							that.audioContext.stop();
						}
						that.messageTip = "答题时间已结束";

						// 添加定时器
						var count = 0;
						var timer = setInterval(function() {
							count++;
							// console.log("定时器执行了" + count + "次");
							that.getMatchStatusInfo()
							if (count >= 30 || that.allFinished == true || that.game_finished == 1) {
								clearInterval(timer);
								// console.log("定时器已停止");
							}
						}, 3000);


						that.finishShow = true;
						that.gameStatus = 100;

						// 时间到
						var content = "#时间到#-120";
						that.fnNotify(content);
						//发送消息
						that.fnSendMessage(content);



						console.log("#时间到#-120" + 'aaaaa')
						// 统计结果
						// that.allFinished = true;
						if (data._total_user_info) {
							that.user_list = Object.values(data._total_user_info);
							// console.log('################user_list-题已答完----', that.user_list)

							for (var i = 0; i < that.user_list.length; i++) {
								if (that.user_info.id == that.user_list[i]['user_id']) {
									if (that.user_list[i]['status'] == 100) {
										that.finishShow = true;
									}
								}
							}
							console.log("#时间到#-120" + 'bbbbbb')
							// 统计是否全部答完
							var finished_count = 0;
							for (var i = 0; i < that.user_list.length; i++) {
								if (that.user_list[i].status == 100) {
									finished_count++;
								}
							}
							if (finished_count == that.user_list.length) {
								that.allFinished = true;
								console.log("#时间到#-120" + 'cccccc')
								if (that.game_mode == '极速拼词|联机模式') {
									// 判断是不是优胜
									var _best_user_info = data._best_user_info;

									that.fnNotify('优胜')
									console.log('_best_user_info', _best_user_info)
									setTimeout(function() {
										if (that.user_info.id == _best_user_info['user_id'] && _best_user_info[
												'yes_num'] > 0) {
											if (that.game_mode == '极速拼词|联机模式') {
												that.yanhuaShow = true;
											}
										}
									});
								}

							}
						}
						return false;
					}
				}
				// 提交答案
				if (content.includes('提交答案')) {
					// 开始答题后：统计答题正确率
					for (var i = 0; i < that.user_list.length; i++) {
						if (that.user_info.id == that.user_list[i]['user_id']) {
							var answer_list = that.user_list[i]['answer_list'];
							console.log('提交答案answer_list', answer_list)
							if (answer_list) {
								var yes_num = 0;
								var no_num = 0;
								for (var j = 0; j < answer_list.length; j++) {
									var answer = answer_list[j];
									var answerItem = answer.split(':');
									// console.log('answerItem======', answerItem)
									if (answerItem[1] == answerItem[2]) {
										yes_num++;
									} else {
										no_num++;
									}
								}
								that.yes_num = yes_num;
								that.no_num = no_num;

								console.log('answerItem======', that.yes_num, that.no_num)

								if ((that.yes_num + that.no_num) == that.test_wordlist.length) {
									that.messageTip = "已完成答题";
									that.finishShow = true;
									that.answer_status = "";

									that.loadingStatus = false;
									// 题已答完
									var content = "#题已答完#-" + (120 - that.downtime);
									that.fnNotify(content);
									//发送消息
									that.fnSendMessage(content);
									return false;
								} else {
									setTimeout(function() {
										that.fnNext(); // 下一题
										that.currentAnswer = "";
										that.answer_status = "";
									}, 800);
								}
							}
						}
					}
				}

				// 题已答完
				if (content.includes('题已答完')) {
					if (data._total_user_info) {
						that.user_list = Object.values(data._total_user_info);
						// console.log('################user_list-题已答完----', that.user_list)

						for (var i = 0; i < that.user_list.length; i++) {
							if (that.user_info.id == that.user_list[i]['user_id']) {
								if (that.user_list[i]['status'] == 100) {
									that.finishShow = true;
								}
							}
						}

						// 统计是否全部答完1
						var finished_count = 0;
						for (var i = 0; i < that.user_list.length; i++) {
							if (that.user_list[i].status == 100) {
								finished_count++;
							}
						}
						if (finished_count == that.user_list.length) {
							that.allFinished = true;



							// console.log('-人一人一人一人一人珍全人一人一人一人一人珍全人一人一人一人一人珍全人一人一人一人一人珍全w')

							if (that.game_mode == '极速拼词|联机模式') {
								// 判断是不是优胜
								var _best_user_info = data._best_user_info;

								that.fnNotify('优胜')
								console.log('_best_user_info', _best_user_info)
								setTimeout(function() {
									if (that.user_info.id == _best_user_info['user_id'] && _best_user_info[
											'yes_num'] > 0) {
										if (that.game_mode == '极速拼词|联机模式') {
											that.yanhuaShow = true;
										}
									}
								});
							}

						}
					}
				}

				// 解散房间
				if (content.includes('解散房间')) {
					that.showAlertDialog = true;
					// setTimeout(function() {
					// 	uni.redirectTo({
					// 		url: '/pages/games/index'
					// 	});
					// }, 500)
				}

				// 退出房间
				if (content.includes('退出房间')) {

				}

				// 离开房间
				if (content.includes('离开房间')) {

				}
			},

			stopAllFn() {
				if (this.startRecording) {
					this.stopRecord()
					this.startRecording = false
					this.stopOtherState()
					this.resetPercent();
				}
			},

			// 极速拼词|训练模式
			fn_JSPC_offline(data) {
				var that = this;
				that.fn_JSPC_online(data);
			},

			// 获取比赛状态数据
			getMatchStatusInfo() {
				var that = this;
				if (that.game_finished == 1) {
					return false;
				}
				that.$http.getMatchStatusInfo({
					'group_id': that.group_info.id
				}).then(res => {
					// console.log('1*******1')
					// console.log(res)
					if (res.code === 200) {
						var _best_user_info = res.data._best_user_info;
						setTimeout(function() {
							if (that.user_info.id == _best_user_info['user_id'] && _best_user_info[
									'yes_num'] > 0) {
								if (that.game_mode == '极速拼词|联机模式') {
									that.yanhuaShow = true;
								}
							}
						});
						that.allFinished = true;
					} else {}
				})
			},


			// 用户主动点击播放单词
			fnPlayWordVoiceV2() {
				var that = this;
				that.loadingStatus = false;
				var word_info = that.test_wordlist[that.currentWordIndex];
				if (that.voiceType == 'word') {
					return;
				}
				that.voiceType = 'word';
				that.voicePlaying = true;
				that.zhudongClick = true;
				if (that.audioContext) {
					that.audioContext.stop();
					// that.audioContext.src = word_info.voice_word; // 原上传音频
					that.audioContext.src = that.$util.wordVoiceUrl(word_info.word); // 合成音频
					that.audioContext.play();
				}
			},

			// 播放单词
			fnPlayWordVoice() {
				var that = this;
				// console.log('that.test_wordlist:', that.test_wordlist);
				var word_info = that.test_wordlist[that.currentWordIndex];
				// console.log('word_info:', word_info);
				that.voiceType = 'word';
				that.voicePlaying = true;
				if (word_info) {
					that.loadingStatus = true;
					that.zhudongClick = false;
					if (that.audioContext) {
						that.audioContext.stop();
						// that.audioContext.src = word_info.voice_word;
						that.audioContext.src = that.$util.wordVoiceUrl(word_info.word);
						that.audioContext.play();
					}
				} else {
					uni.showToast({
						title: '单词信息异常'
					})
				}
			},

			//完成比赛
			fnFinishGame() {
				var that = this;

				that.game_finished = 1;
				that.finishShow = false;
				that.allFinished = false;

				that.isClose = true;
				that.socketTask.close();

				if (that.game_mode == '极速拼词|训练模式') {
					uni.redirectTo({
						url: '/pages/games/jspc/game_jspc_rank_detail?group_id=' + that.group_info.id +
							'&game_mode=' +
							that
							.game_mode
					})
				}
				if (that.game_mode == '极速拼词|联机模式') {
					uni.redirectTo({
						url: '/pages/games/jspc/game_jspc_rank?group_id=' + that.group_info.id + '&game_mode=' +
							that
							.game_mode
					})
				}
			},
		}
	}
</script>

<!-- #ifdef APP -->
<script module="testMainVue" lang="renderjs">
	/**============= App中在renderjs中引入RecordApp，这样App中也能使用H5录音、音频可视化 =============**/
	/** 先引入Recorder **/
	import Recorder from 'recorder-core'; //注意如果未引用Recorder变量，可能编译时会被优化删除（如vue3 tree-shaking），请改成 import 'recorder-core'，或随便调用一下 Recorder.a=1 保证强引用

	//按需引入需要的录音格式编码器，用不到的不需要引入，减少程序体积；H5、renderjs中可以把编码器放到static文件夹里面用动态创建script来引入，免得这些文件太大
	import 'recorder-core/src/engine/mp3.js'
	import 'recorder-core/src/engine/mp3-engine.js'
	import 'recorder-core/src/engine/wav.js'
	import 'recorder-core/src/engine/pcm.js'

	//可选引入可视化插件
	import 'recorder-core/src/extensions/waveview.js'
	import 'recorder-core/src/extensions/wavesurfer.view.js'

	import 'recorder-core/src/extensions/frequency.histogram.view.js'
	import 'recorder-core/src/extensions/lib.fft.js'

	/** 引入RecordApp **/
	import RecordApp from 'recorder-core/src/app-support/app.js'
	//【必须引入】uni-app支持文件
	import '../../../uni_modules/Recorder-UniCore/app-uni-support.js'

	export default {
		mounted() {
			//App的renderjs必须调用的函数，传入当前模块this
			RecordApp.UniRenderjsRegister(this);
		},
		methods: {
			//这里定义的方法，在逻辑层中可通过 RecordApp.UniWebViewVueCall(this,'this.xxxFunc()') 直接调用
			//调用逻辑层的方法，请直接用 this.$ownerInstance.callMethod("xxxFunc",{args}) 调用，二进制数据需转成base64来传递
		}
	}
</script>
<!-- #endif -->

<style lang="less">
	.startable {
		color: white !important;
	}

	.fangzu {
		background: #f73c6a !important;
		color: white !important;
		position: relative;

		.huangguan {
			position: absolute;
			height: 20px;
			width: 20px;
			left: -9px;
			top: -12px;
		}
	}

	.page {
		background-image: url(/static/image/app/gameBg.png);
		background-size: 100% 100%;
		background-position: top left;
		background-repeat: no-repeat;
		width: 100%;
		height: 100vh;
		position: relative;
		text-align: center;

		.input-content-back {
			width: 300px;
			height: 100px;
			position: absolute;
			top: -200px;
			z-index: 100000;

			.input-class {
				width: 100px;
				height: 10px;
			}
		}
	}

	.btn-style {
		margin: 3px auto;
		background: linear-gradient(to top, #fff497, #ffd16b);
		border-radius: 25px;
		color: black;
		font-family: hzgb;
	}

	.btn-style2 {
		margin: 3px auto;
		border-radius: 25px;
		font-weight: bold;
	}

	.word-tag-class {
		border-radius: 25px;
		font-weight: bold;
		max-width: 70%;
		line-height: 25px;
		margin-left: 15%;
		padding: 5px 10px;
		box-sizing: border-box;
		background: var(--themeButtonBottomBack);
		font-family: hzgb;
		color: #000;
		font-size: 15px;
		margin-bottom: 8px;
	}

	.pass-btnback {
		width: 64px;
		height: 64px;
		border-radius: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to bottom, #b6359c, #ef0a6a);

		.pass-btn {
			width: 54px;
			height: 54px;
			line-height: 54px;
			text-align: center;
			color: white;
			font-size: 16px;
			border-radius: 30px;
			background: linear-gradient(to bottom, #ef0a6a, #b6359c);
		}
	}

	.pass {
		background-image: url(/static/image/app/pass.png);
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		height: 90px;
		width: 80px;
		margin: 0 auto;
		color: white;
		font-size: 20px;
		font-weight: bold;
		line-height: 90px;
		z-index: 9999999;
		position: absolute;
		top: 3px;
		left: 3px;
	}

	.invite_copy {
		background-image: url(/static/image/app/invite_copy.png);
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		width: 135px;
		color: white;
		height: 32px;
		line-height: 32px;
		font-size: 14px;
		font-family: hzgb;
	}

	.invite_weixin {
		background-image: url(/static/image/app/invite_weixin.png);
		background-size: 100% 100%;
		background-position: center center;
		background-repeat: no-repeat;
		width: 135px;
		color: black;
		font-weight: bold;
		height: 32px;
		line-height: 32px;
		font-size: 14px;
		font-family: hzgb;
	}

	.main {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.level_item {
			overflow: hidden;
		}
	}

	.level_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90px;
		width: 100%;
		overflow: hidden;
		background: linear-gradient(to bottom, #1c170d, #373632);
	}

	.level_2 {
		flex: 1;
		color: white;
		// background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.33), rgba(128, 128, 128, 0.17));
		// background-image: url(/static/image/app/test_end_new.png);
		background-size: 100% 100%;
		background-position: bottom center;
		background-repeat: no-repeat;

		.create_room_btn {
			width: 200px;
			color: black;
			font-weight: bold;
			margin: 0 auto;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(to top, #fff497, #ffd16b);
			box-shadow: 0px 7px 0px 0px rgba(209, 165, 77, 1);
			margin: 0 auto;
			margin-top: 20px;
		}

		.show_room_btn {
			width: 100px;
			margin: 20px auto;
			margin-top: 50px;
			border-radius: 21px;
			background-position: center center;
			background-size: 100% 100%;
			height: 35px;
			line-height: 35px;
			color: black;
			font-weight: bold;
			background: linear-gradient(to top, #fff497, #ffd16b);
			box-shadow: 0px 7px 0px 0px #d1a54d;
		}

		.room_box {
			display: flex;
			flex-direction: column;

			height: auto;
			margin: 20px;

			.room_search {
				display: flex;
				flex-direction: row;
				background: yellow;
				border-radius: 20px;
				height: 32px;
				line-height: 32px;
				justify-content: center;
				align-items: center;
				padding: 0px 3px;

				.search_left {
					width: 50px;
					background-image: url(/static/image/app/fangdajing.png);
					height: 50px;
					background-size: 22px;
					background-repeat: no-repeat;
					background-position: center center;
				}

				.search_center {
					flex: 1;
				}

				.search_right {
					width: 60px;
					background: black;
					border-radius: 20px;
					height: 26px;
					line-height: 26px;
				}
			}
		}
	}

	.level_3 {
		height: 235px;
		// height: 435px;
		min-height: 235px;
	}

	.flex(@direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: @direction;
	}

	// 使用示例
	.element {
		.flex(row);
	}

	.answer_success {
		border: 3px solid blue !important;
		color: blue !important;
	}

	.answer_error {
		border: 3px solid red !important;
		color: red !important;
	}

	.scroll-list {
		.scroll-list__goods-item {
			margin: 10px 10px;
			text-align: center;
			background: linear-gradient(to bottom, #130e00, #373632);
			padding: 8px 4px;
			border-radius: 6px;
			font-family: hzgb;

			.scroll-list__goods-item__text {
				color: #000;
				text-align: center;
				font-size: 12px;
				white-space: nowrap;
			}
		}

		.scroll-list__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			.scroll-list__show-more__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}

		.ok-btn {
			background: linear-gradient(to top, #fff497, #ffd16b);
			border-radius: 10px;
			padding: 3px 9px;
			color: black;
			font-weight: bold;
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 300px;
		height: 300px;
		background-image: url(../../../static/image/done.png);
		background-size: cover;
		background-position: center;
		font-family: hzgb;
		color: #ffd571;
		text-align: center;
		padding-top: 104px;
		font-size: 36px;


	}
</style>
<style lang="scss">
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-right: 20px;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}

	.fengzai {
		position: relative;
	}

	.ope {
		position: absolute;
		top: 138px;
	}

	.speech-back {
		height: 42px;
		width: 42px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 21px;
		position: relative;

		.speech-class {
			height: 42px;
			width: 42px;
			background: var(--navBottomBackColor);
			border-radius: 21px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			z-index: 10;
			overflow: hidden;
			background-size: contain;
			background-repeat: no-repeat;

			.speech-sen-class {
				height: 35px;
				width: 35px;
				border-radius: 21px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.recording {
			background-image: url('../../../static/image/speechBg.png');
			overflow: visible !important;
		}

		.circle1,
		.circle2,
		.circle3 {
			// height: 42px;
			// width: 42px;
			// background: var(--navBottomBackColor);
			// border-radius: 21px;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			// position: absolute;
			// z-index: 9;
		}



		.circle1 {
			animation-delay: 0.1s;
		}

		.circle2 {
			animation-delay: 0.2s;
		}

		.circle3 {
			animation-delay: 0.3s;
		}
	}

	@keyframes circleChange {
		0% {
			transform: scale(1.3);
			opacity: 0.8;
		}

		25% {
			transform: scale(1.6);
			opacity: 0.6;
		}

		50% {
			transform: scale(1.9);
			opacity: 0.4;
		}

		75% {
			transform: scale(2.2);
			opacity: 0.22;
		}

		100% {
			transform: scale(2.5);
			opacity: 0.05;
		}
	}
</style>